<template>
  <div class="classify">
    <van-nav-bar
      title="分类歌单"
      left-arrow
      @click-left="onClickLeft"
      fixed
    />
    <van-tabs sticky>
      <!-- 头部导航 -->
      <van-tab v-for="(classes, index) in classify" :key="index">
        <template #title>
          <div @click="getSongLists()">
            {{ classes.type }}
          </div>
        </template>
        <!-- 内容标题（全部、热门、语种...） -->
        <div class="titles">
          <!-- 大标题 -->
          <!-- <h2>{{ classes.type }}</h2> -->
          <!-- 小标题 -->
          <div
            v-for="(items, index) in item[index]"
            :key="index"
            class="titles1"
            @click="getSongLists(items.id)"
          >
            {{ items.name }}
            <!-- {{ items.id }} -->
          </div>
        </div>
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
          offset="0"
        >
          <div class="music-list">
            <div class="img-box" v-for="(music, index) in musics" :key="index">
              <!-- 显示隐藏播放按钮 -->
              <div class="hide-show" @mouseover="enter" @mouseleave="leave">
                <!-- 点击跳转到歌单详情页 -->
                <img
                  @click="goDetail('/home/songSheet', music.dissid)"
                  :src="music.imgurl"
                  alt=""
                />
                <van-button
                  v-show="flag"
                  icon="play-circle-o"
                  type="primary"
                  class="button-pause"
                />
              </div>
              <div>{{ music.dissname }}</div>
              <div class="name">{{ music.creator.name }}</div>
              <div class="play">{{ "播放量：" + music.listennum }}</div>
            </div>
          </div>
        </van-list>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
export default {
  data: () => ({
    classify: [],
    musics: [],
    item: [],
    pageNo: 0,
    pageSize: 10,
    loading: false,
    finished: false,
    total: 0,
    flag: false
  }),
  methods: {
    onLoad() {
      // 异步更新数据
      setTimeout(async () => {
        await this.getSongLists2()

        // 加载状态结束
        this.loading = false
        // console.log(this.total)// 100
        // 数据全部加载完成
        if (this.musics.length >= this.total) {
          this.finished = true
        }
      }, 500)
    },
    // 获取分类titles
    async getSongListCategory() {
      const res = await this.$http.getSongListCategory()
      // console.log(res)
      this.classify = res.data.data
      // console.log(this.classify)
      res.data.data.forEach((el, index) => {
        this.item.push(el.list)
        // console.log(this.item)
      })
    },
    // 获取歌单列表
    async getSongLists(id) {
      ++this.pageNo
      const res = await this.$http.getSongLists({ id: id, pageNo: this.pageNo, pageSize: this.pageSize })
      this.musics = res.data.data.list
    },
    async getSongLists2(id) {
      ++this.pageNo
      const res = await this.$http.getSongLists({ id: id, pageNo: this.pageNo, pageSize: this.pageSize })
      this.musics = this.musics.concat(res.data.data.list)
      this.total = res.data.data.total
    },
    // 点击跳转到详情页面
    // goDetail(id) {
    //   this.$router.push('/home/classifyinfo1/' + id)
    // },
    // goDetail2(id) {
    //   this.$router.push('/home/classifyinfo2/' + id)
    // },
    // 移入
    enter: function () {
      this.flag = true
    },
    // 移出
    leave: function () {
      this.flag = false
    },
    // 返回上一页
    onClickLeft() {
      this.$router.go(-1)
    }
  },
  created() {
    this.getSongListCategory()
    // this.getSongLists()
  }
}
</script>
<style lang="less">
.classify {
  .music-list {
    display: flex;
    flex-wrap: wrap;
    font-size: 12px;
    justify-content: space-between;
    .img-box {
      width: 46%;
      margin-bottom: 10px;
      position: relative;
      .hide-show {
        img {
          width: 180px;
        }
        .button-pause {
          widows: 50px;
          height: 50px;
          border-radius: 50%;
          background-color: white;
          opacity: 0.8;
          position: absolute;
          top: 70px;
          left: 60px;
          border: 0;
          font-size: 20px;
          // display: none;
        }
      }
      // .hide-show:hover .button-pause {
      //   display: block;
      // }
    }
    .name {
      color: #999;
      margin-top: 5px;
      margin-bottom: 5px;
    }
    .play {
      color: #999;
    }
    .img-box:nth-of-type(2n + 1) {
      padding-left: 5px;
    }
    .img-box:nth-of-type(2n) {
      padding-right: 10px;
    }
  }
  .titles {
    font-size: 12px;
    margin-bottom: 10px;
    margin-top: 20px;
    h2 {
      margin-left: 15px;
    }
    .titles1 {
      display: inline-block;
      margin-left: 30px;
      margin-bottom: 20px;
    }
    .titles1:hover {
      color: red;
    }
  }
}
</style>
